<script>
export default {
  name: "ShangPinComponent",
  data(){
    return{
      value1:'',
      input1:'',
      input2:'',
      startTime:"",
      endTime:'',
      startTimeStr:'',
      endTimeStr:'',
      ShangPin:{},
      radio1:'全部商品',
      msg:"",



    }
  },
  created (){
    this.axios.request("/goods/querySearchShopGoodsList",{params:{
        pageNum:1,
        pageSize:10,
        goodsName:"",
        goodsStatus:"",
        shopName:"",
        startTime:"",
        endTime:"",
      }}).then((res)=>{
      console.log(res);
      this.ShangPin = res.data.data;
    }).catch((err)=>{
      console.log(err);
    })
  },
  methods:{
    //查询小区
    searchxiaoqu(){
      let startTime="";
      let endTime="";
      if (this.value1.length > 0){
        startTime = this.value1[0].getFullYear() + "-" +(this.value1[0].getMonth()+1).toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+ "-" + this.value1[0].getDate().toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+" 00:00:00";

        endTime = this.value1[1].getFullYear() + "-" +(this.value1[1].getMonth() +1).toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+"-" +this.value1[1].getDate().toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+" 00:00:00";
      };

      this.axios.request("http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList",{params:{
          pageNum:1,
          pageSize:10,
          goodsName:this.input1,
          goodsStatus:"",
          shopName:this.input2,
          startTime:startTime,
          endTime:endTime,
        }}).then((res)=>{
        console.log(res);
        this.ShangPin = res.data.data;
      }).catch((err)=>{
        console.log(err);
      })
    },

    //把上下架切换成 0和 1
    goodsStatusChange(){
      console.log(this.radio1);
      //设置商品状态 全部商品为 " "  以上架"1" 已下架"0"
      let status = "";
      switch (this.radio1){
        case "上架中":
          status = "1"
          break;
        case "已下架":
          status = "0"
          break;
      }
      this.axios.request("/goods/querySearchShopGoodsList",{params:{
          pageNum:1,
          pageSize:10,
          goodsName:"",
          goodsStatus:status,
          shopName:"",
          startTime:"",
          endTime:"",
        }}).then((res)=>{
        this.ShangPin = res.data.data;
      }).catch((err)=>{

      })
    },

    //点击 上架 按钮操作
    handleClick(obj){
      //点击按钮  传值是当前的此行对象
      console.log(obj);
      console.log( obj.goodsStatus);
      if(obj.goodsStatus == 1){
        obj.goodsStatus = 0;
      }else{
        obj.goodsStatus = 1;
      }
      console.log(obj.goodsId);
      console.log(obj.goodsStatus);
      this.axios.post("goods/modifyShopGoods",{
        goodsId:obj.goodsId,
        goodsStatus:obj.goodsStatus,
      }).catch(()=>{
        //请求数据
        this.axios.request("goods/querySearchShopGoodsList",{
          params:{
            pageNum:'1',
            pageSize:'10',
            goodsName:'',
            goodsStatus:'',
            shopName:'',
            startTim:'',
            endTime:'',
            startTimeStr:'',
            endTimeStr:''
          }
        }).then((res)=>{
          this.ShangPin=res.data.data;
          console.log(this.ShangPin);
        }).catch((err)=>{});



      }).catch((error)=>{console.log(error)});



    },
    //分页器切换页面
    handleCurrentChange(page){
      console.log(page);
      this.axios.request("goods/querySearchShopGoodsList",{
        params:{
          pageNum:page,
          pageSize:10,
          goodsName:'',
          goodsStatus:status,
          shopName:'',
          startTim:'',
          endTime:''
        }
      }).then((res)=>{
        this.ShangPin=res.data.data;
        console.log(this.ShangPin);
      }).catch((err)=>{});


    },


  },
}
</script>

<template>
<div class="shangpin">

  <div class="border">
    <span>状态:&nbsp;&nbsp;&nbsp;</span>
    <el-radio-group v-model="radio1" @input="goodsStatusChange">
      <el-radio-button label="全部商品"></el-radio-button>
      <el-radio-button label="上架中"></el-radio-button>
      <el-radio-button label="已下架"></el-radio-button>
    </el-radio-group>
  </div>

  <div class="one">
    <span>商品名称:&nbsp;&nbsp;</span>
    <el-input class="input1" v-model="input1" placeholder=""></el-input>
    <span>所属门店:&nbsp;&nbsp;</span>
    <el-input class="input2" v-model="input2" placeholder=""></el-input>
  </div>

  <div class="block">
    <span class="demonstration">发布日期:&nbsp;&nbsp;</span>
    <el-date-picker class="block1"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    </el-date-picker>
    <el-button class="two" type="primary" @click="searchxiaoqu">搜索</el-button>
  </div>

  <div class="content">
    <el-table
        :data="ShangPin.list"
        border
        :header-cell-style="{background:'#46a6ff','text-align':'center',color:'white'}"
        style="width:1250px ">
      <el-table-column
          fixed
          prop="goodsId"
          label="商品ID"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="goodsName"
          label="商品名"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="goodsShopName"
          label="所属门店"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="goodsSalesVolume"
          label="销量"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="goodsPresentPrice"
          label="预估价"
          align="center"
          width="130">
      </el-table-column>
      <el-table-column
          prop="addTime"
          label="发布时间"
          align="center"
          width="240">
      </el-table-column>
      <el-table-column
          prop="goodsStatus"
          label="状态"
          align="center"
          width="150">
        <template slot-scope="scope" >
          <span v-if="scope.row.goodsStatus === 1" style="color: #1E9FFF;font-size: 14px;">上架中</span>
          <span v-else-if="scope.row.goodsStatus === 0" style="color: #1E9FFF;font-size: 14px; ">已下架</span>
        </template>

      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="140">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small" >
            <span v-if="scope.row.goodsStatus === 1">下架</span>
            <span v-else-if="scope.row.goodsStatus === 0">上架</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
<!--分页部分-->
  <div class="block">
    <el-pagination
        layout="prev, pager, next"
        :total=this.ShangPin.total
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>

</div>
</template>

<style scoped>
.shangpin{
  height: 500px;
}
.border{
  margin-top: 25px;
  font-size: 18px;
  margin-bottom: 30px;
  display: inline-block;
}
.one{
  display: inline-block;
}
.one span{
  margin-left: 30px;
}
.input1{
  width: 200px;
  margin-top: 25px;
}
.input2{
  width: 200px;
}
.block{
  margin-top: 10px;
  margin-bottom: 20px;

}
.two{
  width: 100px;
  margin-left: 20px;
}
.block span{
  font-size: 18px;

}
.block1{
  width: 400px;
}

</style>